<template>
  <div id="ht-datepicker">
    <div class="ht-timepicker-date picker-box" v-popover:datePop_ref>
      <span style="font-size: 14px">{{ selectedDate }}</span>
      <img src="../../imgs/date-rili.png" alt="" />
    </div>
    <vue-popper
      ref="datePop_ref"
      v-model="visible"
      popper-class="date-picker-popper"
      placement="bottom-start"
      trigger="click"
      :visible-arrow="false"
    >
      <div class="date-picker-box">
        <div class="date-box-header">
          <div
            class="date-picker-item"
            @click="handleCheck('before', 'year')"
          />
          <div
            class="date-picker-item"
            @click="handleCheck('before', 'month')"
          />
          <div class="year-month">{{ year + ' 年 ' + showMonth + ' 月' }}</div>
          <div
            class="date-picker-item"
            @click="handleCheck('after', 'month')"
          />
          <div class="date-picker-item" @click="handleCheck('after', 'year')" />
        </div>
        <div class="date-box-week">
          <div class="date-picker-item">周日</div>
          <div class="date-picker-item">周一</div>
          <div class="date-picker-item">周二</div>
          <div class="date-picker-item">周三</div>
          <div class="date-picker-item">周四</div>
          <div class="date-picker-item">周五</div>
          <div class="date-picker-item">周六</div>
        </div>
        <DateTable
          :calendar-date="calendarDate"
          :selected-date="selectedDate"
          @onSelectDay="handleSelectDay"
        />
      </div>
    </vue-popper>
  </div>
</template>

<script>
import DateTable from './DateTable';

export default {
  name: 'DatePicker',
  props: {
    // 选中的日期
    selectedDate: {
      type: String,
      required: true,
    },
    // 是否选中关闭弹框
    autoClose: {
      type: Boolean,
    },
  },
  components: { DateTable },
  data() {
    return {
      visible: false,
      calendarDate: '', // 显示的日期时间
    };
  },
  computed: {
    year() {
      return new Date(this.calendarDate).getFullYear();
    },
    month() {
      return new Date(this.calendarDate).getMonth();
    },
    showMonth() {
      const mm = this.month + 1;
      return mm > 9 ? mm.toString() : '0' + mm;
    },
  },
  watch: {
    selectedDate: {
      handler(newVal, oldVal) {
        // 仅监听一次，初始化后有值的时候赋值
        if (!oldVal) {
          this.calendarDate = newVal;
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleCheck(type, dateType) {
      let year, month;
      if (dateType === 'year') {
        year = type === 'before' ? this.year - 1 : this.year + 1;
        this.calendarDate = this.calendarDate.replace(
          this.calendarDate.substr(0, 4),
          year
        );
      } else {
        if (this.month === 0 && type === 'before') {
          month = '12';
          year = this.year - 1;
        } else if (this.month === 11 && type === 'after') {
          month = '01';
          year = this.year + 1;
        } else {
          const mm = type === 'before' ? this.month : this.month + 2;
          month = mm > 9 ? mm : '0' + mm;
          year = this.year;
        }
        this.calendarDate = this.calendarDate.replace(
          this.calendarDate.substr(0, 7),
          year + '-' + month
        );
      }
    },
    handleSelectDay(val) {
      if (val !== this.selectedDate) {
        this.$emit('onSelectDay', val);
        this.calendarDate = val;
      }
      if (this.autoClose) {
        this.visible = false; // 关闭弹框
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#ht-datepicker {
  // width: 100%;
  img {
    object-fit: scale-down;
  }
  .ht-timepicker-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    width: 140px;
    padding: 0 12px;
  }
  .picker-box {
    background-color: rgba(9, 78, 182, 0.7);
    border-left: 1px solid #255895;
    border-bottom: 1px solid #255895;
    cursor: pointer;
    user-select: none;
  }
}
</style>
<style lang="scss">
.date-picker-box {
  font-size: 14px;
  .date-picker-item {
    line-height: 28px;
    width: 30px;
    text-align: center;
    cursor: pointer;
    margin-right: 15px;
  }
  .date-box-header {
    height: 28px;
    display: flex;
    .year-month {
      line-height: 28px;
      width: 120px;
      text-align: center;
      margin-right: 15px;
      font-size: 15px;
      color: #000;
    }
    .date-picker-item {
      background-repeat: no-repeat;
      background-position: center center;
      &:nth-child(1) {
        background-image: url('../../imgs/datell.png');
      }
      &:nth-child(2) {
        background-image: url('../../imgs/datel.png');
      }
      &:nth-child(4) {
        background-image: url('../../imgs/dater.png');
      }
      &:last-child {
        margin-right: 0;
        background-image: url('../../imgs/daterr.png');
      }
    }
  }
  .date-box-week {
    display: flex;
    margin: 10px 0;
    .date-picker-item {
      color: #388bff;
      font-size: 12px;
      cursor: default;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .date-box-body {
    .days-row {
      display: flex;
      .date-picker-item {
        font-size: 12px;
        &:last-child {
          margin-right: 0;
        }
      }
      .date-picker-item-normal {
        font-weight: bold;
        color: #080808;
      }
      .date-picker-item-innormal {
        color: #9a9696;
      }
      .date-picker-item-selected {
        background-image: url('../../imgs/date-selected.png');
        background-position: center center;
        background-size: 90%;
        background-repeat: no-repeat;
      }
    }
  }
}
</style>
